<template>
  <div class="passenger-flow-statistics">
    <nanning-screen-border-box :bgImg="bgImg">
      <screen-title>客运客流统计</screen-title>
      <div class="passenger-flow-statistics-content">
        <div class="content-top">
          <div class="content-top-num">共<span>1125</span>人</div>
          <screen-chart @initCb="initChart"></screen-chart>
        </div>
        <div class="content-bottom">
          <div class="content-bottom-top">
            <div class="content-bottom-top-title">客流地域排行</div>
            <div class="content-bottom-top-tab">
              <nanning-screen-title-tab :currentTab="currentTab" @on-change-tab="onChangeTab"></nanning-screen-title-tab>
            </div>
          </div>
          <div class="content-bottom-echarts">
            <screen-chart @initCb="initRankChart"></screen-chart>
          </div>
        </div>
      </div>
    </nanning-screen-border-box>
  </div>
</template>

<script lang="ts">
import { getFlowChartOption, getRankChartOption } from './option'
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'passenger-flow-statistics'
})
export default class PassengerFlowStatistics extends Vue {
  private bgImg: string = require('assets/images/box-border-2.png')

  private flowChart: any = null

  private rankChart: any = null

  private flowList: any = [
    { value: 237, name: '省外客流' },
    { value: 854, name: '省内客流' }
  ]

  private tabList: any = [
    { value: 1, label: '省内' },
    { value: 2, label: '省外' }
  ]

  private currentTab = 1

  //  饼图
  private initChart(chart: any): void {
    chart.clear()
    this.flowChart = chart
    setTimeout(() => {
      this.flowChart.setOption(
        getFlowChartOption({
          data: this.flowList
        })
      )
    }, 300)
  }

  //  进度条
  private initRankChart(chart: any): void {
    chart.clear()
    this.rankChart = chart
    setTimeout(() => {
      this.rankChart.setOption(getRankChartOption())
    }, 300)
  }

  //  tab点击
  private onChangeTab(value: any) {
    this.currentTab = value
  }
}
</script>

<style lang="scss" scoped>
.passenger-flow-statistics {
  box-sizing: border-box;
  width: 100%;
  height: 53.19%;
  &-content {
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 50px);
    .content-top {
      box-sizing: border-box;
      width: 100%;
      height: 45%;
      // border: 1px solid red;
      position: relative;
      &-num {
        color: #fff;
        position: absolute;
        right: 8%;
        top: 5px;
        span {
          display: inline-block;
          padding: 0 5px;
          font-weight: bold;
          color: #ffffff;
          font-size: 30px;
        }
      }
    }
    .content-bottom {
      box-sizing: border-box;
      width: 100%;
      height: 55%;
      &-top {
        box-sizing: border-box;
        position: relative;
        display: flex;
        padding: 0 18px;
        height: 30px;
        line-height: 30px;
        &-title {
          width: 30%;
          font-size: 20px;
          font-family: 'PingFang Regular';
          font-weight: 500;
          color: #ffffff;
          padding-left: 15px;
        }
        &-title::after {
          content: '';
          display: block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #23fffc;
          position: absolute;
          left: 18px;
          top: 10px;
        }
        &-tab {
          width: 70%;
        }
      }
      &-echarts {
        width: 100%;
        height: calc(100% - 30px);
      }
    }
  }
}
</style>
